<template>
  <div id="userLayout">
    <a-layout style="min-height: 100vh">
      <a-layout-header class="header">
        <a-space class="title" @click="goHome">
          <img alt="hoj" class="logo" src="../assets/logo.svg" />
          <h3>黄 OJ</h3>
        </a-space>
      </a-layout-header>
      <a-layout-content class="content">
        <router-view />
      </a-layout-content>
      <a-layout-footer class="footer">
        <a href="http://h1234.top" target="_blank">By 黄炎榕</a>
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<style>
#userLayout {
  text-align: center;
  background: url("https://gw.alipayobjects.com/zos/rmsportal/FfdJeJRQWjEeGTpqgBKj.png");
}

/*头部样式*/
#userLayout .header {
  margin-top: 100px;
}

/*logo及标题*/
.title {
  cursor: pointer;
}

/*logo*/
.title .logo {
  width: 64px;
  height: 64px;
}

/*内容样式*/
#userLayout .content {
  padding: 20px;
}

/*底部样式*/
#userLayout .footer {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 16px;
  background-color: #f5f7fa;
}

/*底部链接*/
#userLayout .footer a {
  color: #86909c;
  text-decoration: none;
}
</style>

<script lang="ts" setup>
import { useRouter } from "vue-router";

const router = useRouter();
// 返回首页
const goHome = () => {
  router.push({ path: "/" });
};
</script>